﻿<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App27"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core" x:Name="page"
    x:Class="App27.MainPage"
    mc:Ignorable="d">

	<Grid x:Name="grid" Background="#FF1E971E">
		<Interactivity:Interaction.Behaviors>
			<Core:EventTriggerBehavior EventName="Loaded">
				<Core:GoToStateAction StateName="Card1Top"/>
			</Core:EventTriggerBehavior>
		</Interactivity:Interaction.Behaviors>
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="VisualStateGroup">
				<VisualStateGroup.Transitions>
					<VisualTransition From="Card1Top" GeneratedDuration="0" To="Card2Top">
						<Storyboard>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Card1">
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-150"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Card2">
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="Card2">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <x:Int32>0</x:Int32>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                    <DiscreteObjectKeyFrame.Value>
                                        <x:Int32>1</x:Int32>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="Card1">
								<DiscreteObjectKeyFrame KeyTime="0">
									<DiscreteObjectKeyFrame.Value>
										<x:Int32>1</x:Int32>
									</DiscreteObjectKeyFrame.Value>
								</DiscreteObjectKeyFrame>
								<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
									<DiscreteObjectKeyFrame.Value>
										<x:Int32>0</x:Int32>
									</DiscreteObjectKeyFrame.Value>
								</DiscreteObjectKeyFrame>
							</ObjectAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Card2">
								<EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Card2">
								<EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Card1">
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.8"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Card1">
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.8"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Card1">
								<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-20"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Card2">
								<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
						</Storyboard>
					</VisualTransition>
					<VisualTransition From="Card2Top" GeneratedDuration="0" To="Card1Top">
                        <Storyboard FillBehavior="HoldEnd">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Card2">
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-150"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Card1">
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="Card1">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <x:Int32>0</x:Int32>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                    <DiscreteObjectKeyFrame.Value>
                                        <x:Int32>1</x:Int32>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="Card2">
								<DiscreteObjectKeyFrame KeyTime="0">
									<DiscreteObjectKeyFrame.Value>
										<x:Int32>1</x:Int32>
									</DiscreteObjectKeyFrame.Value>
								</DiscreteObjectKeyFrame>
								<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
									<DiscreteObjectKeyFrame.Value>
										<x:Int32>0</x:Int32>
									</DiscreteObjectKeyFrame.Value>
								</DiscreteObjectKeyFrame>
							</ObjectAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Card1">
								<EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Card1">
								<EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Card2">
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.8"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Card2">
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.8"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Card2">
								<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-20"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
							<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Card1">
								<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
								<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20"/>
								<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
						</Storyboard>
					</VisualTransition>
					<VisualTransition GeneratedDuration="0:0:1"/>
				</VisualStateGroup.Transitions>
				<VisualState x:Name="Card1Top">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="Card1">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<x:Int32>1</x:Int32>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<DoubleAnimation Duration="0" To="-170" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="Card2Top">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="Card2">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<x:Int32>1</x:Int32>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<DoubleAnimation Duration="0" To="-86" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
			<Rectangle x:Name="Card1" Fill="Blue" HorizontalAlignment="Center" Height="300" Margin="0" Stroke="Black" VerticalAlignment="Center" Width="200" RenderTransformOrigin="0.5,0.5">
				<Rectangle.RenderTransform>
					<CompositeTransform/>
				</Rectangle.RenderTransform>
			</Rectangle>
			<Rectangle x:Name="Card2" Fill="Red" HorizontalAlignment="Center" Height="300" Margin="0" Stroke="Black" VerticalAlignment="Center" Width="200" RenderTransformOrigin="0.5,0.5">
				<Rectangle.RenderTransform>
					<CompositeTransform/>
				</Rectangle.RenderTransform>
			</Rectangle>
			<Button x:Name="GotoCard1" Content="Card 1" HorizontalAlignment="Left" Height="70" Margin="34,40,0,0" VerticalAlignment="Top" Width="96" Background="#FF002EFF">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Core:GoToStateAction StateName="Card1Top"/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Button x:Name="GotoCard2" Content="Card 2" HorizontalAlignment="Left" Height="70" Margin="34,126,0,0" VerticalAlignment="Top" Width="96" Background="Red">
				<Interactivity:Interaction.Behaviors>
					<Core:EventTriggerBehavior EventName="Click">
						<Core:GoToStateAction StateName="Card2Top"/>
					</Core:EventTriggerBehavior>
				</Interactivity:Interaction.Behaviors>
			</Button>
			<Rectangle x:Name="rectangle" Fill="White" HorizontalAlignment="Left" Height="64" Margin="138,215,0,0" Stroke="Black" VerticalAlignment="Top" Width="19" RenderTransformOrigin="0.5,0.5">
				<Rectangle.RenderTransform>
					<CompositeTransform/>
				</Rectangle.RenderTransform>
			</Rectangle>

		</Grid>
</Page>
